<template>
	<span class="screenshot">
		<el-tooltip class="item" effect="dark" :content="$t('feedback')" placement="left">
			<el-button @click="handleOk" type="primary" icon="el-icon-camera" circle></el-button>
		</el-tooltip>
		<JwChat-index :taleList="list" @enter="bindEnter" v-if="box" v-model="inputMsg" :toolConfig="tool" />
	</span>
</template>

<script>
export default {
	data() {
		return {
			box: false,
			inputMsg: '',
			config: { historyConfig: { tip: '查看更多' } },
			list: [
				{
					date: '2020/04/25 21:19:07',
					text: { text: '起床不' },
					mine: false,
					name: '留恋人间不羡仙',
					img: '../image/one.jpeg'
				},
				{
					date: '2020/04/25 21:19:07',
					text: { text: "<audio data-src='https://www.w3school.com.cn/i/horse.mp3'/>" },
					mine: false,
					name: '只盼流星不盼雨',
					img: '../image/two.jpeg'
				},
				{
					date: '2020/04/25 21:19:07',
					text: { text: "<img data-src='../image/three.jpeg'/>" },
					mine: false,
					name: '只盼流星不盼雨',
					img: '../image/two.jpeg'
				},
				{
					date: '2020/04/16 21:19:07',
					text: { text: "<video data-src='https://www.w3school.com.cn/i/movie.mp4' controls='controls' />" },
					mine: true,
					name: 'JwChat',
					img: '../image/three.jpeg'
				}
			],
			tool: {
				show: ['file', 'history', 'img'],
				callback: this.toolEvent,
				showEmoji: true
			}
		};
	},
	computed: {
		flag() {
			return this.validatenull(this.form.img);
		}
	},
	methods: {
		bindEnter() {
			const msg = this.inputMsg;
			if (!msg) return;
			const msgObj = {
				date: '2020/05/20 23:19:07',
				text: { text: msg },
				mine: true,
				name: 'JwChat',
				img: '../image/three.jpeg'
			};
			this.list.push(msgObj);
		},
		toolEvent(type) {
			console.log('tools', type);
		},
		handleOk() {
			this.box = true;
		}
	}
};
</script>

<style lang="scss" scoped>
.screenshot {
	position: fixed;
	bottom: 50px;
	right: 20px;
	z-index: 2048;
	&__img {
		min-height: 200px;
		margin-top: 50px;
		padding: 10px 20px;
		box-sizing: border-box;
		border: 1px solid #eee;
		width: 100%;
	}
	&__menu {
		text-align: center;
	}
}
</style>
